<script setup>
import AddNewAddr from "@/views/Order/components/AddNewAddr.vue";

defineOptions({
  name: "OrderIndex"
})
import {ref} from "vue";
import {useGoodsStore, useOrderInfoStore} from "@/stores/index.js";
import {userGetAddrByUserId} from "@/api/user.js";
import ChangeAddr from "@/views/Order/components/ChangeAddr.vue";
import {useRouter} from "vue-router";
import {getCommodity} from "@/api/goods.js";
// 是否显示弹框
const dialogVisible = ref(false)
// 拿到商品数据
const orderInfoStore = useOrderInfoStore()
// 用于渲染的商品
const goodsInfo = orderInfoStore.goodsInfo
// 拿到图片信息
const goodsList = ref()
const getGoodsList = async () => {
  const res = await getCommodity()
  goodsList.value = res.data
  setImage()
}
getGoodsList()
const setImage = () => {
  orderInfoStore.setOrderImg(goodsList.value.find(goods => goods.id === goodsInfo.goods_id).image)
}
// 拿到地址信息
const isChangeAddr = ref(false)
const addrList = ref()
const getAddr = async () => {
  const res = await userGetAddrByUserId(goodsInfo.id)
  addrList.value = res.data
  orderInfoStore.setAddrInfo(addrList.value.find(addr => addr.status === 1))
}
const Address = ref()
// 默认地址背景
const getBackgroundColor = (status) => {
  return status === 1 ? 'red' : '#999'
}
// 刷新数据
const flush = () => {
  Address.value = orderInfoStore.addrInfo
}
flush()
getAddr()
// 结算订单
const router = useRouter()
const subOrder = () => {
  router.push("/pay")
}
</script>

<template>
  <div class="order-container" v-if="addrList">
    <el-row :gutter="0">
      <el-col :span="5"></el-col>
      <el-col :span="14">
<!--        标题写明是订单页-->
        <div class="title-box">
          <a href="javascript:void(0);" class="link">
            <b></b>
          </a>
          <el-steps :active="2" align-center>
            <el-step title="1.我的购物车" />
            <el-step title="2.请核对订单信息" />
            <el-step title="3.成功提交订单" />
          </el-steps>
        </div>
<!--        提示信息-->
        <div class="tip">
          <span class="tit">
            请结算并核对订单信息
          </span>
        </div>
<!--        全部订单信息-->
        <div class="info-box">
          <div class="head-1">
            <!--          标题-->
            <div class="step-tit">
              <h3>收货人信息</h3>
              <div class="exart">
                <a @click="dialogVisible = true" href="javascript:void(0);" class="new">
                  新增收获地址
                </a>
              </div>
            </div>
            <!--          地址-->
            <div class="dz-info">
              <ul>
                <li class="item">
                  <div class="name-box">
                    <span>{{ Address.name }} {{ (Address.address).substring(0,2) }}</span>
                    <b></b>
                  </div>
                  <div class="address-detail">
                    <span class="addr-name">{{ Address.name }}</span>
                    <span class="addr-info">{{ Address.address }}</span>
                    <span class="addr-phone">{{ (Address.phone).slice(0,3)+'****'+(Address.phone).slice(-4) }}</span>
                    <span class="addr-default"
                          :style="{ backgroundColor: getBackgroundColor(Address.status) }" >
                      默认地址</span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="more" @click="isChangeAddr = true">
              <span>更多地址</span>
              <b></b>
            </div>
          </div>
<!--          分割-->
          <div class="hr"></div>
<!--          支付方式-->
          <div class="pay-box">
            <div class="step-tit">
              <h3>支付方式</h3>
            </div>
            <!--          地址-->
            <div class="dz-info">
              <div class="name-box">
                <span>在线支付</span>
                <b></b>
              </div>
            </div>
          </div>
          <!--          分割-->
          <div class="hr"></div>
          <div class="give-box">
            <div class="step-tit">
              <h3>送货清单</h3>
            </div>
            <el-row class="give-info" :gutter="0">
              <el-col :span="4">
                <div class="p-tit">
                  <h4>商家：官方自营</h4>
                </div>
                <div class="p-item">
                  <div class="p-img">
                    <img :src="goodsInfo.img" alt="">
                  </div>
                </div>
                </el-col>
              <el-col :span="7">
                <div class="give-info">

                  <div class="goods-info">
                    <!--                  商品标题-->
                    <div class="goods-tit">
                      <a class="title" href="javascript:void(0);">
                        {{ goodsInfo.title }}
                      </a>
                    </div>
                    <!--                  价格-->
                  </div>
                  <div class="version-box">
                    <div class="fl">
                      <strong>颜色：</strong>
                      <span>{{ goodsInfo.look }}</span>
                    </div>
                    <div class="fl">
                      <strong>版本：</strong>
                      <span>{{ goodsInfo.version }}</span>
                    </div>
                  </div>
                  </div>
                </el-col>
              <el-col :span="5">
                <div class="p-price">
                  <span class="price">$ {{ goodsInfo.totalPrice }}</span>
                  <span class="p-num">   x{{ goodsInfo.count }}</span>
                  <span class="p-status">   现货</span>
                </div>
                </el-col>

              <el-col :span="8"></el-col>
            </el-row>
          </div>
        </div>
        <div class="submit">
          <el-button @click="subOrder"
                     element-loading-text="正在支付中，请稍后..."
                     class="submit-btn"
                     type="danger">
            提交订单
          </el-button>
        </div>
      </el-col>
      <el-col :span="5"></el-col>
    </el-row>
  </div>
  <AddNewAddr v-model="dialogVisible"/>
  <ChangeAddr @flushed="flush" v-model="isChangeAddr"/>
</template>

<style lang="scss" scoped>
.order-container {

  .el-row {
    background-color: #fff;
  }

  .title-box {
    position: relative;
    width: 982.33px;
    height: 50px;
    margin: 15px 0 22px;

    .el-steps--horizontal {
      width: 480px;
      margin-left: auto;

      .el-step_title {
        font-size: 11px;

        .is-process {
          color: #7e8491;
        }
      }
    }


    .link {
      overflow: hidden;
      display: block;
      left: 0;
      position: absolute;
      width: 100px;
      height: 40px;
      line-height: 99em;
      top: 8px;
      right: 28px;
      background: #fff;

      b {
        display: block;
        position: absolute;
        width: 100px;
        height: 40px;
        line-height: 99em;
        top: 0;
        right: 0;
        background: url("https://sky-takeout-ximeng.oss-cn-hangzhou.aliyuncs.com/purchase-icon.png") #fff no-repeat;
      }
    }
  }

  .tip {
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    font-family: "Microsoft YaHei";
    overflow: hidden;

    .tit {
      float: left;
    }

  }

  .submit {
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .submit-btn {
    position: relative;
    left: 895px;
  }

  .info-box {
    border: 1px solid #f0f0f0;
    padding: 0 20px;

    .give-box {
      margin-bottom: 10px;
      .step-tit {
        line-height: 40px;
        height: 40px;
        color: #333;

        h3 {
          font-size: 14px;
          height: 40px;
          line-height: 40px;
          float: left;
        }

      }

      .give-info {
        background-color: #9bc2e4;
        height: 140px;

        .p-tit {
          line-height: 40px;
          margin-left: 24px;
        }

        .p-item {
          width: 80px;
          height: 80px;
          margin-left: 25px;
          .p-img {
            width: 80px;
            height: 80px;
            img {
              width: 80px;
              height: 80px;
            }
          }
          }
        .goods-info {
          width: 484px;
          .goods-tit {
            width: 270px;
            position: relative;
            top: 18px;
            line-height: 24px;

            .title {
              position: relative;
              top: -6px;
              white-space: normal;
              word-wrap: break-word;
              word-break: break-all;
            }
          }
        }
        .version-box {
          width: 270px;
          position: relative;
          top: 27px;
        }
      }
      .p-price {
        position: relative;
        top: 28px;

        .price {
          color: #d62222;
          font-size: 19px;
        }
        .p-num {
          margin-left: 10px;
        }
        .p-status {
          margin-left: 10px;
        }
      }
    }

    .pay-box {
      margin-bottom: 10px;

      .step-tit {
        line-height: 40px;
        height: 40px;
        color: #333;

        h3 {
          font-size: 14px;
          height: 40px;
          line-height: 40px;
          float: left;
        }

      }

      .dz-info {
        height: 42px;

        .name-box {
          text-align: center;
          border: 2px solid #e4393c;
          width: 144px;
          height: 30px;
          float: left;

          span {
            position: relative;
            top: 3px;
          }

          b {
            display: block;
            position: relative;
            right: -129px;
            bottom: 4px;
            width: 12px;
            height: 12px;
            overflow: hidden;
            background: url("@/assets/selected-icon.png") no-repeat;
          }
        }

      }

    }

    .hr {
      border: 1px solid #f0f0f0;
      margin-bottom: 10px;
    }

    .head-1 {
      margin-bottom: 10px;

      .step-tit {
        line-height: 40px;
        height: 40px;
        color: #333;

        h3 {
          font-size: 14px;
          height: 40px;
          line-height: 40px;
          float: left;
        }

        .exart {
          float: right;

          a {
            color: #005ea7;
          }
        }

      }

      .more {
        height: 18px;
        line-height: 18px;
        //padding: 5px 20px;
        cursor: pointer;

        b {
          display: inline-block;
          vertical-align: middle;
          height: 10px;
          line-height: 10px;
          width: 9px;
          margin-left: 5px;
          background: url("@/assets/addr-i.png") no-repeat 0 0;
        }
      }

      .dz-info {
        height: 42px;

        .item {
          height: 30px;
          margin: 6px 0;
          float: left;
          width: 99.8%;
          line-height: 30px;
        }

        .name-box {
          text-align: center;
          border: 2px solid #e4393c;
          width: 144px;
          height: 30px;
          float: left;

          span {
            position: relative;
            top: -2px;
          }

          b {
            display: block;
            position: relative;
            right: -129px;
            bottom: 15px;
            width: 12px;
            height: 12px;
            overflow: hidden;
            background: url("@/assets/selected-icon.png") no-repeat;
          }
        }

        .address-detail {
          float: left;
          height: 30px;
          line-height: 30px;

          span {
            display: inline-block;
            margin-left: 10px;
          }
          .addr-default {
            margin: 5px 10px;
            background-color: #999;
            color: #fff;
            padding: 0 3px;
            line-height: 20px;
          }
        }
      }
    }

  }

}
</style>
